import type { App } from 'vue';
/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
import type { DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {
  copyData: string | number;
  __handleClick__: any;
}
export function copyDirective(app: App) {
  app.directive('copy', {
    mounted(el: ElType, binding: DirectiveBinding) {
      el.copyData = binding.value;
      el.addEventListener("click", handleClick);
    },
    updated(el: ElType, binding: DirectiveBinding) {
      el.copyData = binding.value;
    },
    beforeUnmount(el: ElType) {
      el.removeEventListener("click", el.__handleClick__);
    }
  });
}

function handleClick(this: any) {
  const input = document.createElement("input");
  input.value = this.copyData.toLocaleString();
  document.body.appendChild(input);
  input.select();
  document.execCommand("Copy");
  document.body.removeChild(input);
  ElMessage({
    type: "success",
    message: "复制成功"
  });
}

